import Wrapper from "./style";
import {Button, Checkbox, Form, Input} from "antd";
import {useNavigate} from "react-router-dom";
import {login} from "@/api";

const AccountLogin = () => {

    const navigate = useNavigate()

    const onFinish = (values: any) => {
        login(values).then(res => {
            if (res.status === 200) {
                const {identity, token} = res.data.data
                if (identity === '老师') {
                    localStorage.setItem('teacher_token', token)
                    navigate('/teacherMyClassRoom')
                } else {
                    localStorage.setItem('student_token', token)
                    navigate('/studentMyClassRoom')
                }
            }
        })
    };

    const inputStyle = {
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        lineHeight: '36px'
    }

    const btnStyle = {
        marginTop: '12px',
        width: '100%',
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        padding: '10px 20px',
        fontSize: '14px',
        borderRadius: '4px',
        color: '#fff',
        backgroundColor: '#4285f4',
        borderColor: '#4285f4',
    }

    return (
        <Wrapper>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{remember: true}}
                onFinish={onFinish}
            >
                <Form.Item
                    name="account"
                    rules={[{required: true, message: '请输入账号'}]}
                >
                    <Input placeholder="请输入邮箱/手机号/账号" style={inputStyle}/>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{required: true, message: '请输入密码'}]}
                >
                    <Input
                        type="password"
                        placeholder="请输入密码"
                        style={inputStyle}
                    />
                </Form.Item>
                <Form.Item>
                    <div className="bottom-btn">
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>下次自动登录</Checkbox>
                        </Form.Item>
                        <a className="login-form-forgot" href="">
                            忘记密码?
                        </a>
                    </div>
                </Form.Item>

                <Form.Item>
                    <Button style={btnStyle} type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
                <div className='bottom'>
                    <p>还没有账号?</p>
                    <a onClick={() => {
                        navigate('/register')
                    }}>去注册</a>
                </div>
            </Form>
        </Wrapper>
    )
}
export default AccountLogin;